<!-- src/views/data-center/DataLog.vue -->
<template>
  <main class="main-content">
    <div class="breadcrumb">
      <span class="breadcrumb-item">数据中心</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item active">数据管理</span>
    </div>                
    <div class="card">
      <!-- 筛选/操作栏 -->
      <div class="table-actions-bar">
        <div class="filter-group">
          <select class="form-select"><option>不限地区</option></select>
          <select class="form-select"><option>不限设备类型</option></select>
          <select class="form-select"><option>是否关注</option></select>
          <select class="form-select"><option>不限数据状态</option></select>
          <input type="text" class="form-input" placeholder="输入站点或设备名称搜索">
          <button class="btn btn-primary">查询</button>
        </div>
        <div class="actions-group">
          <button class="btn btn-primary">导出</button>
          <button class="btn btn-default">打印</button>
          <button class="btn btn-default">刷新</button>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th><input type="checkbox"></th>
              <th>设备名称</th><th>所在地区</th><th>产品类型</th><th>是否关注</th>
              <th>数据状态</th><th>设备状态</th>
              <th>参数1</th><th>参数2</th><th>参数3</th><th>参数4</th>
              <th>最近上报时间</th><th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
              <td><input type="checkbox"></td>
              <td>{{ item.deviceName }}</td>
              <td>{{ item.area }}</td>
              <td>{{ item.productType }}</td>
              <td>{{ item.isFocused }}</td>
              <td><span class="status-tag" :class="item.dataStatus.class">{{ item.dataStatus.text }}</span></td>
              <td>{{ item.deviceStatus }}</td>
              <td>{{ item.param1 }}</td>
              <td>{{ item.param2 }}</td>
              <td>{{ item.param3 }}</td>
              <td>{{ item.param4 }}</td>
              <td>{{ item.lastReportTime }}</td>
              <td class="action-links"><a href="#">历史数据</a></td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页栏 -->
      <div class="pagination-bar">
        <span class="total-count">共 80 条数据</span>
        <!-- ...此处省略完整分页器，可参考DeviceList.vue实现... -->
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref } from 'vue'

const tableData = ref([
  {
    deviceName: 'XXX公司排污出口', area: '12区', productType: '地下水质量监测传感器', isFocused: '是',
    dataStatus: { text: '有效', class: 'status-online' }, deviceStatus: '在线',
    param1: '1234.2mg/l', param2: '1234.2mg/l', param3: '1234.2mg/l', param4: '1234.2mg/l',
    lastReportTime: '2023-11-10 15:00:53'
  },
  {
    deviceName: 'XXX公司排污出口', area: '34区', productType: 'AI视频监控', isFocused: '否',
    dataStatus: { text: '无效', class: 'status-offline' }, deviceStatus: '掉线',
    param1: '1234.2mg/l', param2: '1234.2mg/l', param3: '1234.2mg/l', param4: '1234.2mg/l',
    lastReportTime: '2023-11-10 15:00:53'
  },
  {
    deviceName: 'XXX公司排污出口', area: '12区', productType: '空气质量监测传感器', isFocused: '是',
    dataStatus: { text: '存疑', class: 'status-error' }, deviceStatus: '在线',
    param1: '1234.2mg/l', param2: '1234.2mg/l', param3: '1234.2mg/l', param4: '1234.2mg/l',
    lastReportTime: '2023-11-10 15:00:53'
  },
  // ...更多模拟数据
]);
</script>